<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>货位管理</title>
  <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
  <!--级联选择器-->
  <div class="block">
    <span class="demonstration"><el-tag>请选择需要查询的[仓库/库区/货架]</el-tag></span>
    <el-cascader :props="props" v-model="wareAndCargoAndShelf"></el-cascader>
    请输入货位编号:<el-input v-model="thisCargo"  style="width: 300px"></el-input>
    <!--货位状态的选择-->
    <el-select v-model="status" placeholder="请选择状态"  >
      <el-option
              v-for="item in statusAll"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>
    <!--点击搜索选择器中的内容-->
    <el-button type="primary" icon="el-icon-search" @click="searchToCargo">搜索</el-button>
  </div>
  <br><br><br><br>
  <el-button type="primary" @click="dialogShelfTreeVisible = true">添加货位</el-button>
  <!--添加货位的对话框-->
  <el-dialog title="新建货位" :visible.sync="dialogShelfTreeVisible">
    <el-form :model="cargoAdd" >
      <el-form-item label="*所属仓库" :label-width="formLabelWidth">
        <el-select  v-model="cargoAdd.wareId" placeholder="请选择仓库" >
          <el-option
                  v-for="item in warehouseNameAll"
                  :key="item.value"
                  :label="item.wareName"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="*所属货区" :label-width="formLabelWidth" >
        <el-select v-model="cargoAdd.damId" placeholder="请选择货区" @click.native="selectCargo()" >
          <el-option
                  v-for="item in cargoNameAll"
                  :key="item.value"
                  :label="item.goodsName"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="*所属货架" :label-width="formLabelWidth" >
        <el-select v-model="cargoAdd.shelvesId" placeholder="请选择货架" @click.native="selectShelves">
          <el-option
                  v-for="item in shelfNoAll"
                  :key="item.value"
                  :label="item.shelvesNo"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="*货位编号"  :label-width="formLabelWidth">
            <el-input v-model="cargoAdd.cargoNo" autocomplete="off"></el-input>
        </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="cargoAdd.remark">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveCargo">确 定</el-button>
        <el-button @click="dontCls">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-tag type="success">共有{{num}}个货位</el-tag>
  <!--表格-->
  <el-table
          :data="cargo"
          style="width: 100%">
    <el-table-column label="序号">
      <template slot-scope="scope">
        <span>{{scope.row.id}}</span>
      </template>
    </el-table-column>
    <el-table-column label="货位编号">
      <template slot-scope="scope">
        <span>{{scope.row.cargoNo}}</span>
      </template>
    </el-table-column>
    <el-table-column label="所属货架编号">
      <template slot-scope="scope">
        <span >{{scope.row.tshelves.shelvesNo}}</span>
      </template>
    </el-table-column>
    <el-table-column label="所属货区">
      <template slot-scope="scope">
        <span >{{scope.row.tcargoArea.goodsName}}</span>
      </template>
    </el-table-column>
    <el-table-column label="所属仓库">
      <template slot-scope="scope">
        <span >{{scope.row.tware.wareName}}</span>
      </template>
    </el-table-column>
    <el-table-column label="负责人">
      <template slot-scope="scope">
        <span>{{scope.row.tware.person}}</span>
      </template>
    </el-table-column>
    <el-table-column label="联系电话">
      <template slot-scope="scope">
        <span>{{scope.row.tware.telephone}}</span>
      </template>
    </el-table-column>
    <el-table-column label="放置货物">
      <template slot-scope="scope">
        <span>{{scope.row.product}}</span>
      </template>
    </el-table-column>
    <el-table-column label="创建时间">
      <template slot-scope="scope">
        <span>{{scope.row.creatTime}}</span>
      </template>
    </el-table-column>
    <el-table-column
            label="状态">
      <template slot-scope="scope">
                    <span style="margin-left: -10px" v-if=" scope.row.status ==='有货'" >
                        <el-button type="success" round>有货</el-button>
                    </span>
        <span style="margin-left: -10px" v-if=" scope.row.status ==='无货'">
                      <el-button  type="danger" round>无货</el-button>
                    </span>
      </template>
    </el-table-column>
    <el-table-column label="操作" style="width: 180px">
      <template slot-scope="scope">
        <!--改变状态-->
        <el-button type="success" icon="el-icon-check" circle
                   @click="updateStatus(scope.$index, scope.row)"></el-button>
        <!--修改-->
        <el-button type="primary" icon="el-icon-edit" circle
                   @click="handleEdit(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>

  </el-table>
  <!--分页-->
  <el-pagination
          background
          @current-change="loadPageCargo"
          layout="prev, pager, next"
          :total="total"
          :current-page="current"
          :page-size="pageSize">
  </el-pagination>
  <!--货架编辑的详情-->
  <el-dialog title="编辑货位" :visible.sync="dialogModifyShelfVisible">
    <el-form :model="cargoUpdate"  :inline="true" class="demo-form-inline">
      <el-form-item label="货位编号："  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.cargoNo" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="货架编号："  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.tshelves.shelvesNo" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="*所属仓库："  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.tware.wareName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="*所属货区："  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.tcargoArea.goodsName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="*负责人："  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.tware.person" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="*联系电话："  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.tware.telephone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="*主要商品"  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.product" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="*创建时间"  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.creatTime" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="*状态"  :label-width="formLabelWidth">
        <el-input v-model="cargoUpdate.status" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="货架商品描述" :label-width="formLabelWidth">
        <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="cargoUpdate.remark">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateCargo">确 定</el-button>
        <el-button @click="dontCls">取 消</el-button>
      </el-form-item>

    </el-form>
  </el-dialog>
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
  let id = 0;
  new Vue({
    el:"#app",
    data() {
      return {
        num:0,//货位数目
        textarea: '',//添加货架框中的文本描述
        textarea1:'',//编辑框中的仓库文本描述
        thisCargoId:null,//用于查询下级的货架--库区id
        thisWareId:null,//用于查询下级的库区--仓库id
        thisShelfId:null,//查询获取货架id
        warehouseNameAll:null,//所有的仓库
        cargoNameAll:null,//某仓库下的所有的库区
        shelfNoAll:null,//某库区下的所有的货架
        value1:null,
        cargo:null,//表格的显示，元数据
        total:0,//总条数
        current:0,//当前条数
        pageSize:0,//每页条数
        dialogModifyShelfVisible:false,//编辑货架对话框
        dialogShelfTreeVisible:false,//添加货架对话框
        formLabelWidth:"100px",//表格的宽度
        wareAndCargoAndShelf:null,//输入框
        thisCargo:null,//货位输入框
        cargoAdd:{//添加货架的定义
          remark:'',//详情
          shelvesId:'',//所有的仓库
          damId:null,//某仓库下的所有的库区
          wareId:null,//某库区下的所有的货架
          cargoNo:null,//货位编号
        },//添加数据的定义
        cargoUpdate:{//货架编辑数据源
            id:'',
            cargoNo:'',
            shelvesId:'',
             damId:'',
            wareId:'',
            productNo:'',
            product:'',
            creatTime:'',
            batch:'',
            status:'',
            iomNo:'',
            companyId:'',
            remark:'',
            tware:{
            wareName:'',
             person:'',
             telephone:'',
            },
            tcargoArea:{
             goodsNo:'',
             goosName:'',
            },
            tshelves:{
            shelvesNo:'',
            },
            lCode:'',
        },//修改数据的定义
        statusAll:[{
          value:'有货',
          label:'有货'
        },{
          value:'无货',
          label:'无货'
        }],
        status:null,//状态
        /*级联选择器的动态加载*/
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const {level} = node;
            setTimeout(() => {
              /*查询所有的仓库*/
              if (node.level == 0){
                /*查询到所有的仓库*/
                axios.get("/list/t-ware").then(value => {
                  if (value.data.state == '1'){
                    console.log(value)
                    for (let i = 0; i < value.data.data.length; i++) {
                      const nodes = Array.from({length: level + 1})
                              .map(item => ({
                                value: value.data.data[i].wareName,
                                label: value.data.data[i].wareName,
                                leaf: level >= 2
                              }));
                      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                      resolve(nodes);
                    }
                  }
                })
              }
              /*根据仓库查询库区*/
              if (node.level == 1){
                console.log(node.value)
                axios.get("/cargo/"+node.value).then(value => {
                  if (value.data.state == '1') {
                    console.log(value);
                    for (let i = 0; i < value.data.data.length; i++) {
                      const nodes = Array.from({length: level })
                              .map(item => ({
                                value: value.data.data[i].goodsName,
                                label: value.data.data[i].goodsName,
                                leaf: level >= 2
                              }));
                      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                      resolve(nodes);
                    }
                  }
                })
              }
              /*根据库区查询该库区下所有的货架*/
              if (node.level == 2){
                axios.get("/shelves/"+node.value).then(value => {
                  if (value.data.state == '1') {
                    console.log(value);
                    for (let i = 0; i < value.data.data.length; i++) {
                      const nodes = Array.from({length: level - 1})
                              .map(item => ({
                                value: value.data.data[i].shelvesNo,
                                label: value.data.data[i].shelvesNo,
                                leaf: level >= 2
                              }));
                      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                      resolve(nodes);
                    }
                  }
                })
              }
            }, 50);
          }
        }
      }
    },
    methods: {
      /*条件查询1*/
      searchToCargo() {
        console.log(this.wareAndCargoAndShelf)
        console.log(this.status)
        console.log(this.thisCargo)
      if (this.wareAndCargoAndShelf == null && this.status == null && this.thisCargo == null){
           this.loadPageCargo(1);
           this.$message({
          type: 'success',
          message: '查询全部'
        });
      }else if(this.wareAndCargoAndShelf != null){
          axios.post("/cargo/select",{
            cargoNo:this.thisCargo,
            status:this.status,
            tware: {
              wareName: this.wareAndCargoAndShelf[0],
            },
            tcargoArea:{
              goodsName: this.wareAndCargoAndShelf[1],
            },
            tshelves:{
              shelvesNo: this.wareAndCargoAndShelf[2],
            },
            current:this.current
          }).then(value => {
            if (value.data.state == 1){
              this.cargo = value.data.data.records;
              this.total = value.data.data.total;
              this.pageSize = value.data.data.size;
              this.current = value.data.data.current;
              this.$message("已查询");
            }
          })
        }else{
        console.log(">>>>>>>>>>>")
          axios.post("/cargo/select",{
            cargoNo:this.thisCargo,
            status:this.status,
            current:this.current
          }).then(value => {
            if (value.data.state == 1){
              this.cargo = value.data.data.records;
              this.total = value.data.data.total;
              this.pageSize = value.data.data.size;
              this.current = value.data.data.current;
              this.$message("已查询");
            }
          })
        }
      },
      /*清空表单add*/
      cleanAdd(){
        this.cargoAdd={//添加货架的定义
          remark:'',//详情
                  shelvesId:'',//所有的仓库
                  damId:null,//某仓库下的所有的库区
                  wareId:null,//某库区下的所有的货架
                  cargoNo:null,//货位编号
        }
      },
      /*货位的添加*/
      saveCargo(row){
        axios.post("/cargo/add",this.cargoAdd)
                .then(value => {
                  if (value.data.state == 1 ){
                    this.$message("添加成功");
                    this.cleanAdd()
                    this.loadPageCargo(this.current);
                    this.dialogShelfTreeVisible= false;
                  }
                })
      },
      /*货位信息的编辑更新*/
      updateCargo(row){
        /*修改货位*/
        axios.put("/t-cargo/updateCargo",this.cargoUpdate).then(value => {
          if (value.data.state == 1){
            this.$message({
              type: 'success',
              message: '编辑成功!'
            });
            this.dontCls();
          }
        })
      },
      /*货架信息的编辑框中的信息填充*/
      handleEdit(index,row){
        this.cargoUpdate=row;
        this.dialogModifyShelfVisible = true;
      },
      /*数据的双向绑定*/
      dontCls(){
        this.cleanAdd();
        this.dialogShelfTreeVisible = false;
        this.dialogModifyShelfVisible= false;
      },
      /*失去焦点事件获取货区*/
      selectCargo(id){
        //加载所有的库区名
        axios.get("/t-ware/cargo/"+this.cargoAdd.wareId).then(value => {
          if (value.data.state == 1){
            console.log(value.data.data);
            this.cargoNameAll=value.data.data;
              this.$set(this.cargoNameAll)
          }
        });
      },
      /*失去焦点事件获取货架*/
      selectShelves(){
        //加载所有的货架名
        axios.get("/t-shelves/shelves/"+this.cargoAdd.damId).then(value => {
          if (value.data.state == 1){
            this.shelfNoAll=value.data.data;
          }
        });
      },
      /*修改状态*/
      updateStatus(row,index) {
      let status = this.cargo[row].status;
        if (status == '有货'){
          this.$confirm('是否修改为无货？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.put("/cargo",
                    {status:status,
                      id:this.cargo[row].id,
                    }
            ).then(value => {
              if (value.data.state == 1 ){
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.loadPageCargo(this.current);
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            });
          });
        }else {
          this.$confirm('是否修改为有货？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.put("/cargo",
                    {status:status,
                      id:this.cargo[row].id,
                    }
            ).then(value => {
              if (value.data.state == 1 ){
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.loadPageCargo(this.current);
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            });
          });
        }

      },
      /*分页查询所有的货位信息 */
      loadPageCargo(current){
        this.current=current;
        axios.get("/cargo?current="+current).then(value => {
          if (value.data.state == 1 ){
            this.cargo = value.data.data.records;
            this.total = value.data.data.total;
            this.pageSize = value.data.data.size;
            this.current = value.data.data.current;
          }
        })
      }
    },
    /*装载*/
    mounted(){
      this.loadPageCargo(1);

      //加载所有的仓库名
      axios.get("/list/t-ware").then(value => {
        if (value.data.state == 1){
          this.warehouseNameAll=value.data.data;
        }
      });
      /*查询表格条数及货位数量*/
      axios.get("/cargo/count").then(value => {
        if (value.data.state == 1){
          this.num = value.data.data;
        }
      })
    },
  })

</script>
</html>